<template>
    <div class="tt-onion-nav">
        <ul>
            <li
            v-for="item in home.navList"
            v-bind:key="item.id">
                <router-link to="/classify">
                  <div class="icon">
                      <img :src="item.pic" alt="">
                  </div>
                  <div class="txt">
                     <span>{{item.name}}</span>
                  </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data(){
        return{

        }
    },
    computed:{
        ...mapState(['home'])
    },
    // mounted(){
    //     console.log(this.$store.state.home.navList);
    // }
}
</script>

<style lang="less">
@import '../../assets/css/reset.css';
@import '../../assets/less/variable.less';

.tt-onion-nav{
    width: 365px;
    height: 172px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 10px;
    ul{
        width: 100%;
        li{
            width: 70px;
            height: 70px;
            text-align: center;
            float: left;
            margin-top: 10px;
            margin-left: 17px;
        }
    }
}
.icon{
    height: 50px;
    width: 50px;
    margin: 0 auto;
    img{
        width: 100%;
        height: 100%;
        display: block;
    }
}
.txt{
    height: 20px;
    font-size: 14px;
}
</style>